<template>
  <div class="cart">
    <div
      class="cart-list"
      v-for="item in $store.state.cart"
      :key="item.id"
    >
      <div class="cart-item">
        <div class="cart-l">
          <van-switch
            v-model="item.selected"
            @click="sigleSelect($store.state)"
          />
        </div>

        <div class="cart-r">
          <van-card
            :num="item.count"
            :price="item.sell_price*item.count"
            :title="item.title"
            :thumb="item.src"
          >
            <div slot="desc">
              <p>
                <van-stepper v-model="item.count" />
              </p>
            </div>
          </van-card>

        </div>
      </div>
    </div>

    <van-submit-bar
      :price="$store.getters.getAllPrice"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox
        v-model="checked"
        @click="allSelect($store.state)"
      >全选</van-checkbox>
      <span slot="tip">
        你的收货地址不支持同城送, <span>修改地址</span>
      </span>
    </van-submit-bar>
  </div>

</template>
<script>
export default {
  data: () => ({
    value: 1,
    checked: true
  }),
  created () {},
  methods: {
    onSubmit () {
      console.log(88)
    },
    allSelect (state) {
      state.cart.some(item => {
        item.selected = !this.checked
      })
    },
    sigleSelect (state) {
      var num = 0
      setTimeout(() => {
        state.cart.some(item => {
          if (item.selected === true) {
            num++
          }
        })

        if (num === state.cart.length) {
          this.checked = true
        } else {
          this.checked = false
        }
      }, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.cart {
  .cart-list {
    .cart-item {
      display: flex;
      .cart-l {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .cart-r {
        flex: 3;
      }
    }
  }
}
</style>
